<template>
	<view class="content">
		<view @tap='goBack'>
			<image class='close-img' src="../../static/img/close.png" mode=""></image>
		</view>
		<view class="mainTop">

			<view class="mianTaber" v-for="(item,index) in taberList" :key="item.idso" @click="getTar(index)"
				:class="{'borderBottom':contin==index}">{{item.text}}</view>
		</view>
		<view class="mainCenter" v-if="contin==0">
			<view class="mainCenBox">
				<input type="number" maxlength="11" placeholder="请输入手机号码" v-model="phone">
				<view class="mainInp" v-if="codeif==false">
					<input :type="passworif" placeholder="请输入密码" maxlength="28" ref="password" v-model="userPwd">
					<view class="poerter" style="padding-right: 20rpx;" @click="getshouBox"><text
							v-if="shouBox==false">显示</text><text v-else>隐藏</text></view>
				</view>
				<view class="mainInp" v-else>
					<input type="number" placeholder="请输入验证码" maxlength="15" v-model="codeNumber">
					<view class="poerterii" style="padding-right: 20rpx;">
						<text v-if="shoins==61">获取验证码</text>
						<text v-else>{{shoins}}重新发送</text>
					</view>
				</view>
			</view>
			<view class="mainBtnBox">
				<view class="mainBtn" v-for="(item,index) in btnList" :key="index" @click="getBtnTar(item,index)">
					{{item}}
				</view>
			</view>
		</view>
		<view class="mainCenter" v-if="contin==1">
			<view class="mainCenBox">
				<input type="number" maxlength="11" placeholder="请输入手机号码" v-model="phone">
				<view class="mainInp">
					<!-- <input type="number" placeholder="请输入验证码" maxlength="15" v-model="codeNumber"> -->
					<!-- <view class="poerterii" style="padding-right: 20rpx;">
						<text v-if="shoins==61">获取验证码</text>
						<text v-else>{{shoins}}重新发送</text>
					</view> -->
				</view>
				<view class="mainInp">
					<input :type="passworif" placeholder="请输入密码" maxlength="28" ref="password" v-model="userPwd">

					<view class="poerter" style="padding-right: 20rpx;" @click="getshouBox"><text
							v-if="shouBox==false">显示</text><text v-else>隐藏</text></view>

				</view>
			</view>

			<view class="mainBtnBox zuche">
				<view class="mainBtn" @click="getresist">立即注册</view>
			</view>
		</view>
		<view class="iconifbt" v-if="contin==0">
			<view class="log_luit">
				<checkbox-group @change="checkboxChange">
					<checkbox color="#999" :checked="checkedif" />
					勾选即表示同意<text>《用户协议》</text>及<text>《隐私政策》</text>
				</checkbox-group>
			</view>
		</view>
	</view>
</template>

<script>
	import $http from '@/common/api/request.js'
	import {
		userStore
	} from '@/store/user.js'
	import {
		storeToRefs
	} from 'pinia'
	const userListStore = userStore()
	export default {
		data() {
			return {
				taberList: [{
						text: '登录',
						idso: 1
					},
					{
						text: '注册',
						idso: 2
					}
				],
				contin: 0,
				btnList: ['密码登录', '验证码登录'],
				btnListyi: ['密码登录', '验证码登录'],
				btnListya: ['验证码登录', '密码登录'],
				checkedif: false,
				shouBox: false,
				shoins: 60,
				passworif: 'password',
				codeif: false,
				phone: '',
				userPwd: '',
				userPwds: '',
				password: '',
				codeNumber: ''
			}
		},

		methods: {
			checkboxChange(e) {
				this.checkedif = !this.checkedif
			},
			getTar(e) {
				this.contin = e
			},
			getresist() {
				// 注册逻辑
				$http.request({
					url: "/registered",
					method: "POST",
					data: {
						userName: this.phone,
						userPwd: this.userPwd
					}
				}).then((res) => {

					if (!res.success) {
						uni.showToast({
							title: res.msg,
							icon: "none"
						})
						return;
					} else {

						$http.request({
							url: "/addUser",
							method: "POST",
							data: {
								//信息
								userName: this.phone,
								userPwd: this.userPwd
							}
						}).then((e) => {
							if (e.success) {
								uni.showToast({
									title: e.msg,
									icon: "none"
								})
							} else {
								uni.showToast({
									title: '注册失败',
									icon: 'none'
								})
							}
						}).catch(() => {
							uni.showToast({
								title: '请求失败',
								icon: 'none'
							})
						})

					}
				})
			},
			goBack() {
				uni.navigateTo({
					url:'/pages/index/index'
				})
			},
			getBtnTar(e, i) {
				if (e == '密码登录') {
					this.btnList = this.btnListyi
					this.codeif = false
				} else if (e == '验证码登录') {
					this.codeif = true
					this.btnList = this.btnListya
				}
				if (e == '密码登录' & i == 0) {
					if (this.checkedif == false) {
						uni.showToast({
							title: "请勾选用户协议和隐私",
							icon: 'none'
						})
					} else {
						$http.request({
							url: "/login",
							method: "POST",
							data: {
								userName: this.phone,
								userPwd: this.userPwd
							}
						}).then((res) => {
							// 保存用户信息
							if (res.success) {
								userListStore.login(res.data);
								uni.showToast({
									title: res.msg,
									icon: "none"
								})

								uni.hideLoading();
								uni.navigateBack({
									delta: 1
								})
							} else {
								uni.showToast({
									title: res.msg,
									icon: "none"
								})
							}

						}).catch(() => {
							uni.showToast({
								title: '请求失败',
								icon: 'none'
							})
						})
					}
				} else if (e == '验证码登录' & i == 0) {
					let data = {
						mobilPhone: this.phoneNumber,
						codeNumber: this.codeNumber,
						checked: this.checkedif
					}
					this.$emit('capChaLogin', data)

				}
			},

			getshouBox() {
				this.shouBox = !this.shouBox
				if (this.shouBox == false) {
					this.passworif = "password"
				} else {
					this.passworif = "text"
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	@keyframes yes {
		0% {
			opacity: 0;
			bottom: -200rpx;
		}

		50% {
			opacity: .5;
		}

		100% {
			opacity: 1;
			top: 0;
		}
	}

	.content {
		position: fixed;
		left: 0;
		top: 0;
		bottom: 0;
		right: 0;
		width: 100%;
		box-sizing: border-box;
		padding: 30rpx;
		background-color: #f0fdff;
		animation: yes .5s linear;

		.close-img {
			width: 60rpx;
			height: 60rpx;
		}

		.mainTop {
			display: flex;
			align-items: center;
			justify-content: space-around;

			.mianTaber {
				padding: 20rpx;
				width: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #444;
				font-weight: bold;
				font-size: 34rpx;
				padding-bottom: 10rpx;
			}

			.borderBottom {
				color: #ff6600;
				transition: all 1s linear;

				&:before {
					content: '';
					width: 20rpx;
					height: 20rpx;
					margin-right: 15rpx;
					border-bottom: 6rpx solid #ff6600;
					border-right: 6rpx solid #ff6600;
					transform: rotate(-45deg);
				}

				&:after {
					content: '';
					width: 20rpx;
					height: 20rpx;
					margin-left: 15rpx;
					border-bottom: 6rpx solid #ff6600;
					border-left: 6rpx solid #ff6600;
					transform: rotate(45deg);
				}
			}
		}

		.mainCenter {
			padding-top: 20rpx;

			.mainCenBox {
				input {
					width: 75%;
					margin: auto;
					border: solid 1rpx #999;
					margin-top: 40rpx;
					padding: 20rpx 30rpx;
					border-radius: 20rpx;
				}

				.mainInp {
					position: relative;

					.poerterii {
						position: absolute;
						top: 50%;
						right: -20rpx;
						transform: translate(-50%, -50%);
						color: #ff6600;
					}

					.poerter {
						position: absolute;
						top: 50%;
						right: 30rpx;
						transform: translate(-50%, -50%);

						text {
							color: #999;
						}

						.mr {
							padding-right: 30rpx !important;
						}
						
					}
				}
			}

			.zuche {
				.mainBtn {
					color: #fff !important;
					background-color: #ff6600 !important;
					margin-bottom: 100rpx !important;
				}
			}

			.mainBtnBox {
				padding-top: 60rpx;

				.mainBtn {
					margin: auto;
					width: 75%;
					text-align: center;
					padding: 30rpx;
					border-radius: 30rpx;
					margin-bottom: 20rpx;
					border: #ff6600 solid 3rpx;
					background-color: #ff6600;
					font-size: 34rpx;
					color: #fff;

					&:nth-last-child(1) {
						color: #333;
						background-color: transparent;
					}
				}
			}
		}

		.iconifbt {
			padding: 55rpx 0 30rpx;

			.log_luit {
				font-size: 30rpx;

				text {
					color: #ff6600;
				}
			}
		}
	}
</style>